<template>
  <div>
    <div class="center">
      <search-login></search-login>
      <h2>美墅装修灵感合集</h2>
      <div class="inspiration">
        <div class="htype" @click="$router.push('/home/inspiration')">
          <h4>你家户型改对了吗</h4>
          <span>24篇内容</span>
          <img src="https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u103.png" />
          <h5>看一看,什么样的户型才是最适合你的</h5>
        </div>
        <div class="inspiration-right">
          <div class="accept" @click="$router.push('/home/inspiration')">
            <h4>小空间大收纳</h4>
            <span>25篇内容</span>
            <div class="arrange">
              <span>学号收纳很神奇,让你...</span>
              <img src="https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u107.png" />
            </div>
          </div>
          <div class="kid" @click="$router.push('/home/inspiration')">
            <h4>孩子专属小天地</h4>
            <span>31篇内容</span>
            <div class="arrange">
              <span>孩子们的天真烂漫和美丽</span>
              <img src="https://cdn7.axureshop.com/demo/2090757/images/%E9%A6%96%E9%A1%B5/u111.png" />
            </div>
          </div>
        </div>
      </div>
      <h2>
        <span>推荐</span>
      </h2>
      <!-- 推荐内容 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
        <div gutter="10" v-masonry>
          <tuiJian style="margin-bottom: 15px;" v-masonry-tile v-for="item in usermsg" :key="item.id" :tui="item">
          </tuiJian>
        </div>
      </van-list>
      
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import searchLogin from "../../components/searchLogin.vue";
import tuiJian from "../../components/tuiJian.vue";
export default {
  components: { searchLogin, tuiJian },
  data() {
    return {
      usermsg: [
        { id: 1, fm_pic: '../../public/ll.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1', user_name: '张三', view: 3 },
        { id: 2, fm_pic: '../../public/OIP-C.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0', user_name: '李四', view: 150 },
        { id: 3, fm_pic: '../../public/OIPC.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1', user_name: '王五', view: 1200 },
        { id: 4, fm_pic: '../../public/ll.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1', user_name: '张三', view: 3 },
        { id: 5, fm_pic: '../../public/OIP-C.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0', user_name: '李四', view: 150 },
        { id: 6, fm_pic: '../../public/OIPC.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1', user_name: '王五', view: 1200 },
        { id: 7, fm_pic: '../../public/ll.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7KW5GT7NQ8yUGlBbCHEm0gHaNK?pid=ImgDet&rs=1', user_name: '张三', view: 3 },
        { id: 8, fm_pic: '../../public/OIP-C.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://ts1.cn.mm.bing.net/th/id/R-C.3745122e5760fe2283195293d76bc1e0?rik=YBMOcCcn7CX6Ig&riu=http%3a%2f%2fup.deskcity.org%2fpic%2f20%2fe4%2f4d%2f20e44dce0fe116832ba890edaf2ede32.jpg&ehk=vldj1pqTKyKgirU8ck%2f%2bJWEhtPm22Owe5VEmGNMeLpA%3d&risl=&pid=ImgRaw&r=0', user_name: '李四', view: 150 },
        { id: 9, fm_pic: '../../public/OIPC.jpg', evaluate: '这是一行介绍文字这是一行介绍文字', user_pic: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?pid=ImgDet&rs=1', user_name: '王五', view: 1200 },
      ],
      loading: ref(false),
      finished: ref(true)
    }
  },
};
</script>

<style lang="scss" scoped>
.center {
  margin: 20px 20px 0;

  h2 {
    margin: 10px 0;
    display: block;
    position: relative;

    span {
      display: inline-block;
      border-bottom: 5px solid yellow;
    }
  }

  .inspiration {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .inspiration-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .arrange {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #949494;
        margin-top: 5px;

        sapn {
          display: inline-block;
          width: 40px;
        }
      }
    }

    h4 {
      margin: 0;
      font-size: 15px;
    }

    span {
      font-size: 13px;
    }

    .htype,
    .accept,
    .kid {
      box-sizing: border-box;
      background-color: #eae9e5;
      padding: 15px;
    }

    .htype {
      width: 160px;
      height: 220px;
      border-radius: 15px;

      img {
        width: 110px;
      }
    }

    .accept,
    .kid {
      width: 160px;
      height: 100px;
      border-radius: 15px;

      img {
        display: inline-block;
        margin-left: 10px;
        width: 40px;
        height: 30px;
      }
    }

    .kid {
      background-color: #e3e7ee;
    }
  }
}
</style>